/* xbox.css                                                                                             */
/* Originally designed by Stu Nichols at CSSPlay.                                                       */
/* To be freely used on non-profit websites only.                                                       */
/* Adapted and modified by T. Kam, 18 March 2009.                                                       */
/*                                                                                                      */
/* Usage:                                                                                               */
/* This CSS sheet defines classes for rounded corner                                                    */  
/* box environments.                                                                                    */
/*                                                                                                      */
/* Example Usage 1: 
   ================
<div class="zsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_d"></b><b class="xb3 color_d"></b><b class="xb4 color_d"></b></b>
<div class="xboxcontent">
<h1 class="color_d">The snazzy border container</h1>
<br />
<p>This is the outer snazzy box containing the three snazzy boxes below.</p>
<br />
<br class="clear" />
<p>The end</p>
</div>
<b class="xbottom"><b class="xbb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
*/

/* Example Usage 2:
   ================ 
<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a"></b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">
<h1 class="color_a">Blah Blah Title</h1>
<p>You are not currently logged in.
<ul>
<li> Hello World !
<li> Hey Ho
</ul>
</p>

<p>Click <a href="#nogo">here for a demo</a>.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
*/

.zsnazzy {width:760px; margin: 0 auto 0 auto;}
.zsnazzy h1 {margin:0; font-size:1.2em; padding:0 10px 2px 10px; border-bottom:0px solid #444;}
/* .zsnazzy ul {padding:2px 10px 2px 45px;} */

.ysnazzy {width:600px; margin:10px 0;}
.ysnazzy h1 {margin:0; font-size:1.2em; padding:0 10px 2px 10px; border-bottom:0px solid #444;}
.ysnazzy ul {padding:2px 20px 2px 30px;}
.ysnazzy li {padding:5px 0; }

.xsnazzy h1 {margin:0; font-size:1.1em; padding:0 10px 2px 10px; border-bottom:0px solid #d0d2d0;}
.xsnazzy p, .zsnazzy p, .snazzy p { margin:0; padding:5px 10px; font-size:auto;}
.xsnazzy {background: solid #d0d2d0; width:10em; float:left; margin:2px 2px 2px 10px;}
.xsnazzy ul {padding:2px 10px 2px 20px;}

.xboxcontent ul {   
                    list-style-type: square;
                    padding:5px 10px auto 1px;
                    text-align:left;
            }
            
            
.xtop , .xbottom {display:block; background:solid #d0d2d0; font-size:1px; } 
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#d0d2d0; border-left:1px solid #d0d2d0; border-right:1px solid #d0d2d0;}
.xb1 {margin:0 5px; background:#d0d2d0; border-bottom:red;}
.xb2 {margin:0 3px; }
.xb3 {margin:0 2px;}
.xb4 {height:1px; margin:0 1px; }

.xboxcontent {display:block; border:1px solid #d0d2d0; height:auto;}
* html .xboxcontent {height:1px;}

.color_a {background:#dac97e; color:#000;}
.color_b {background:#d0d2d0; color:#000;}
.color_c {background:#758279; color:#fff;}
.color_d {background:#b2ab9b; color:#000;}
.color_e {background:#b2ab9b; color:#fff;}
.color_f {background:#d4d8bd; color:#fff;}